import React, { Component } from 'react';
import { Modal } from 'antd-mobile';
import './style/wodeyinhang.css'
const alert = Modal.alert;

class WoDeYinHang extends Component {

    constructor(props) {
        super(props);
        this.state = {
            cardData: []
        }
    }

    componentDidMount() {
        /**模拟请求卡数据 */
        const data = [
            { cardIcon: require('./img/wodeyinhang/icon2.png'), cardName: '中国建设银行', cardNum: '4259', cardStyle: { background: 'linear-gradient(270deg,rgba(121,166,251,1) 0%,rgba(83,136,252,1) 100%)', boxShadow: '0rem 0.2rem 0.8rem 0rem rgba(85,138,252,0.5)' } },
            { cardIcon: require('./img/wodeyinhang/icon1.png'), cardName: '中信银行', cardNum: '5288', cardStyle: { background: 'linear-gradient(270deg,rgba(254,143,143,1) 0%,rgba(252,86,86,1) 100%)', boxShadow: '0px 2px 8px 0px rgba(252,88,88,0.5)' } }
        ]
        this.setState({
            cardData: data
        })
    }

    renderDot = () => {
        return (<div>
            <img className='wodeyinhangScollShowCardItemCardNameDot' alt='' src={require('./img/wodeyinhang/dot.png')}></img>
            <img className='wodeyinhangScollShowCardItemCardNameDot' alt='' src={require('./img/wodeyinhang/dot.png')}></img>
            <img className='wodeyinhangScollShowCardItemCardNameDot' alt='' src={require('./img/wodeyinhang/dot.png')}></img>
            <img className='wodeyinhangScollShowCardItemCardNameDot' alt='' src={require('./img/wodeyinhang/dot.png')}></img>
        </div>)
    }

    goBack = () => {
        this.props.history.goBack();
    }
    //添加银行卡
    addCard() {
        this.props.history.push({ pathname: '/bangdingyinghangka' })
    }
    //删除银行卡
    deleteCard = (vule) => {
        alert('提示', '是否删除银行卡？', [
            { text: '取消' },
            {
                text: '确定',
                onPress: () => {
                    let data = this.state.cardData;
                    data && data.find((v, k, arr) => {
                        if (vule === v) {
                            arr.splice(k, 1);
                        }
                        return k;
                    })
                    this.setState({
                        cardData: data
                    })
                }
            },
        ])

    }

    render() {
        return (<div className='wodeyinhang'>
            <div className='wodeyinhangNavBar'>
                <div onClick={this.goBack} className='wodeyinhangNavBarArrow'>
                    <img alt='' src={require('./img/wodeyinhang/left.png')}></img>
                </div>
                <div className='wodeyinhangNavBarTitle'>
                    银行卡
                     </div>
                <div>

                </div>
            </div>
            <div className='wodeyinhangScoll'>
                <div className='wodeyinhangScollMycard'>
                    我的卡
                 </div>
                <div className='wodeyinhangScollShowCard'>
                    {
                        this.state.cardData && this.state.cardData.map((v, k) => {
                            return (
                                <div key={v + k} className='wodeyinhangScollShowCardItem' style={{ ...v.cardStyle }}>
                                    <div className='wodeyinhangScollShowCardItemTitle'  >
                                        <div className='wodeyinhangScollShowCardItemTitle2'>
                                            <img alt='' src={v.cardIcon}></img>
                                            <span>{v.cardName}</span>
                                        </div>
                                        <img alt='' onClick={() => this.deleteCard(v)} className='wodeyinhangScollShowCardItemTitleDelet' src={require('./img/wodeyinhang/delete.png')}></img>
                                    </div>
                                    <div className='wodeyinhangScollShowCardItemCardName'>
                                        <div className='wodeyinhangScollShowCardItemCardNameImage'>
                                            {this.renderDot()}
                                        </div>
                                        <div className='wodeyinhangScollShowCardItemCardNameImage'> {this.renderDot()} </div>
                                        <div className='wodeyinhangScollShowCardItemCardNameImage'> {this.renderDot()} </div>
                                        <span>{v.cardNum}</span>
                                    </div>
                                    <div className='wodeyinhangScollShowCardItemDitale'>
                                        单笔限额1万&nbsp;&nbsp;单日限额1万
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className='wodeyinhangScollAddCard' onClick={() => this.addCard()}>
                    <span>添加银行卡</span>
                    <img alt='' src={require('./img/wodeyinhang/add.png')} ></img>
                </div>
                <span className='wodeyinhangScollNotice'>提示：一个会员名下做多只能绑定4个收款账户</span>

            </div>
        </div>)
    }
}

export default WoDeYinHang;